<template>
  <div class="noevent">
    <div :class="['homecontainer','']" v-if="ifcontainerdiv">
      <!-- 渲染左侧组件 -->
      <!-- 顶级 -->
      <!-- 内含容器topblock -->
      <div
        :class="['pointernoevent','commonstyle']"
        :style="{flex: leftjson.flex,display: 'flex',flexDirection: leftjson.flexDirection, height: '100%'}"
      >
        <!-- 区块middleblock -->
        <div
          :style="{display: 'flex',flex: eachblockitem.flex,flexDirection: eachblockitem.flexDirection}"
          v-for="eachblockitem in leftjson.layouts.eachblock"
        >
          <!-- 每个小区块block -->
          <div
            class="commonstyle wm"
            v-for="eachblockitem1 in eachblockitem.eachblock"
            :style="{flex: eachblockitem1.flex}"
          >
            <!-- 边框组件 -->
            <component :is="eachblockitem1.borderType">
              <!-- 数据展示组件 -->
              <component :is="eachblockitem1.blockDetail.code"></component>
            </component>
          </div>
        </div>
      </div>

      <!-- 渲染主内容组件 -->
      <!-- 顶级 -->
      <!-- 内含容器 -->
      <div
        :class="['pointernoevent','commonstyle']"
        :style="{flex: middlejson.flex,display: 'flex',flexDirection: middlejson.flexDirection, height: '100%'}"
      >
        <!-- 区块 -->
        <div
          :style="{display: 'flex',flex: eachblockitem.flex,flexDirection: eachblockitem.flexDirection}"
          v-for="eachblockitem in middlejson.layouts.eachblock"
        >
          <!-- 每个小区块 -->
          <div
            class="commonstyle wm"
            v-for="eachblockitem1 in eachblockitem.eachblock"
            :style="{flex: eachblockitem1.flex}"
          >
            <component :is="eachblockitem1.borderType" :title="eachblockitem1.blockDetail.name">
              <component :is="eachblockitem1.blockDetail.code"></component>
            </component>
          </div>
        </div>
      </div>

      <!-- 渲染右侧组件 -->
      <!-- 顶级 -->
      <!-- 内含容器 -->

      <div
        :class="['pointernoevent','commonstyle']"
        :style="{flex: rightjson.flex,display: 'flex',flexDirection: rightjson.flexDirection, height: '100%'}"
      >
        <!-- 区块 -->
        <div
          :style="{display: 'flex',flex: eachblockitem.flex,flexDirection: eachblockitem.flexDirection}"
          v-for="eachblockitem in rightjson.layouts.eachblock"
        >
          <!-- 每个小区块 -->
          <div
            class="commonstyle wm"
            v-for="eachblockitem1 in eachblockitem.eachblock"
            :style="{flex: eachblockitem1.flex}"
          >
            <component :is="eachblockitem1.borderType" :title="eachblockitem1.blockDetail.name">
              <component :is="eachblockitem1.blockDetail.code"></component>
            </component>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import leftone from "./leftone";
import lefttwo from "./lefttwo";
import leftthree from "./leftthree";
import tollStation from "./tollStation/index";
import computerRoom from "./computerRoom/index";
import mainmap from "./mainmap";
// import cesium from "./cesium";

import titleborder from "../title-border.vue";
import normalborder from "../normalborder.vue";

export default {
  name: "index",
  components: {
    titleborder,
    normalborder,
    leftone,
    lefttwo,
    leftthree,
    mainmap,
    tollStation,
    computerRoom
    // cesium
  },

  watch: {
    // '$root.dataSetting': {
    //   handler: function(n, o) {
    //     console.log("fgdfgdfgdfg");

    //     this.loadData()
    //   },
    //   immediate: true
    // },

    "$store.state.app.dataSetting": {
      handler: function(n, o) {
        this.loadData();
      }
      // immediate: true
    }
    // '$store.state.app.dataSettingFlag': {
    //   handler: function(n, o) {
    //     console.log("fgdfgdfgdfg");

    // this.loadData()
    // },
    // immediate: true
    // }
  },

  data() {
    return {
      ifcontainerdiv: false,
      styleObject: {
        color: "red",
        fontSize: "13px"
      },

      leftdiva: {
        flex: 25
      },

      middlediva: {
        flex: 50
      },

      rightdiva: {
        flex: 25
      },

      leftjson: {},
      middlejson: {},
      rightjson: {}

      // setting: {},

      // layout
    };
  },
  mounted() {
    // console.log(this.$store.state.dataSetting.detail);
  },
  methods: {
    loadData() {
      //动态渲染左中右
      //动态渲染左侧；获取左侧数据

      let setting = this.$store.state.app.dataSetting;

      this.leftjson = setting.detail.content.left;
      this.middlejson = setting.detail.content.middle;
      this.rightjson = setting.detail.content.right;
      this.ifcontainerdiv = true;
    }
  }
};
</script>

<style lang='scss' scoped>
.wm {
  width: 50%;
  margin: 5px;
}

.pointernoevent {
  pointer-events: none;
}

.topblock {
}

.block {
}

.eachblock {
}

.homecontainer {
  width: calc(100vw);
  height: calc(100vh - 100px);
  padding: 10px 30px;
  display: flex;
  flex-direction: row;
  pointer-events: none;
}

.commonstyle {
  background-color: #5553;
  color: red;
}
</style>
